@import './vm';
@import './common';

header {
    .menu {
        position: absolute;
        left: vw(22);
        top: vw(34);
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        align-content: space-between;
        width: vw(30);
        height: vw(23);

        .line {
            width: 100%;
            height: vw(4);
            background-color: #fff;
        }

        .message {
            position: absolute;
            right: vw(-13);
            top: vw(-13);
            width: vw(26);
            height: vw(26);
            border-radius: 50%;
            background-color: #f00;
            color: #fff;
            font-size: vw(8);
            text-align: center;
            line-height: vw(26);
        }
    }

}

.content {
    position: relative;
    // margin-bottom: vW(96);
    padding: vw(132) 0 0;
    height: 100vh;
    overflow-y: scroll;
    // box-sizing: border-box;
    z-index: 0;

    &::after {
        height: vw(96);
        content: '';
        display: block;
        visibility: hidden;
        /*设置元素的可见性，hidden代表元素不可见。虽然元素不可见，但是在文档中的位置还占据着。*/
    }

    .banner {
        position: relative;

        img {
            width: 100%;
        }

        .mask-layer {
            position: absolute;
            padding: 0 vw(29);
            bottom: 0;
            left: 0;
            width: 100%;
            height: vw(104);
            background-color: rgba(0, 0, 0, .3);
            color: #ffffff;

            >p {
                margin-top: vw(22);
                margin-bottom: vw(4);
                font-size: vw(26);
                text-align: left;
            }

            .mask-text {
                display: flex;
                display: -webkit-flex;
                justify-content: space-between;
                align-items: flex-end;

                >p {
                    font-size: vw(22);
                }

                .time {
                    display: flex;
                    display: -webkit-flex;
                    justify-content: flex-end;
                    font-size: vw(17);

                    .eye {
                        margin: 0 vw(6) 0 vw(22);

                        img {
                            margin-right: vw(6);
                            width: vw(21);
                            height: vw(14);
                        }
                    }

                }
            }
        }

    }

    .wrapper {
        display: flex;
        justify-content: space-between;
        margin: 0 vw(29);
        padding: vw(39) 0 vw(29) 0;
        height: vw(213);
        border-bottom: 1px solid #cecece;

        .left {
            width: vw(209);
            height: vw(142);

            >img {
                width: 100%;
                height: 100%;
            }
        }

        .right {
            padding-left: vw(16);
            width: vw(372);

            >p:first-of-type {
                font-size: vw(26);
            }
            >p:nth-of-type(2) {
                margin: vw(22) 0 vw(26);
                font-size: vw(22);
                line-height: vw(26);
                color: #c5c5c5;
            }
            .eye {
                display: flex;
                justify-content: flex-end;
                font-size: vw(18);
                color: #939393;
                img {
                    margin: 0 vw(10) 0 vw(20);
                    width: vw(21);
                    height: vw(16);
                }
            }
        }
    }
    .more {
        height: vw(58);
        display: flex;
        justify-content: center;
        line-height: vw(58);

        >p {
            font-size: vw(22);
            color: #bbbbbb;
        }
    }

}